<html>

<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <!--App自定义的css-->
    <style type="text/css">
        .get-code-box input {
            float: left;
            padding: 10px 15px;
            width: 60%;
            font-size: 14px;
        }

        .get-code-box label {
            float: right;
            width: 40%;
            font-size: 14px;
        }
        body, .mui-content {
            background-color: #fff;
        }
        .mui-input-group {
            background-color: transparent;
        }

        .mui-input-row .mui-btn + input, .mui-input-row label + input, .mui-input-row:last-child {
            background: #fff;
        }

        .mui-card {
            border-radius: 10px;
        }

        .mui-card {
            box-shadow: none;
        }

        .phone-to-sumin-box {
            width: 100%;
            padding: 10px;
            margin-top: 30px;
        }

        .phone-to-sumin-box button {
            width: 100%;
            border-radius: 20px;
            height: 40px;
        }

        .mui-checkbox a {
            color: #007aff;
        }
        .mui-input-group:before{
            height: 0;
        }
        .mui-radio label{
            padding: 11px 25px;
            color:#666;
        }
    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="back-tohost mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">修改密码</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group">
        <input type="hidden" name="userId" id="userId">
        <input type="hidden" class="mui-input-clear" id="userphone"  readonly>
        <div class="mui-input-row mui-card">
            <input type="text" id="userphone1" placeholder="手机号" readonly>
        </div>
        <div class="mui-input-row get-code-box mui-card">
            <input type="number" class="mui-input-clear" id="codenumb" placeholder="短信验证码">
            <label class="getcode-btn" id="getcode-btn">获取验证码</label>
        </div>
        <div class="mui-input-row mui-card">
            <input type="password" class="mui-input-clear" name="password" id="password" placeholder="设置密码">
        </div>

    </form>
    <!--<div class="mui-input-row mui-checkbox mui-left">
        <label>已阅读并同意 <a href="loding.html">xx协议</a></label>
        <input name="checkbox" value="Item 1" type="checkbox" checked>
    </div>-->
    <div class="phone-to-sumin-box">
        <button type="button" class=" mui-btn mui-btn-warning  phone-to-sumin" id="phone-to-sumin">提交</button>
    </div>

</div>
</body>
<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>

<!--<script src="templets/default/js/vconsole.js"></script>-->
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    $(function () {

        $.ajax({
            url: website + "/UserController/queryUserAccount",
            type: "post",
            data: {
                "userId": userId,
            },
            success: function (data) {
                if(data.data != null){
                    var hidephone = data.data.substr(0,3)+"****"+data.data.substr(7);
                    $("#userphone").val(data.data);
                    $("#userphone1").val(hidephone);
                }

                $("#userphone").val(data.data);
            }
        })

    });

    mui('header').on('tap', '.back-tohost', function (e) {
        mui.openWindow({
            url: "user.html",
        });
    });

    var codeNew;
    mui(".phone-to-sumin-box").on('tap', '#phone-to-sumin', function () {
        var codenumb = $("#codenumb").val();
        var password = $("#password").val();
        var account = $("#userphone").val();

        if(codenumb==null || codenumb==''){
            mui.toast('请输入验证码');
            return false;
        }else if(password == null || password==''){
            mui.toast('密码不能为空');
            return false;
        }else if(password.length < 6){
            mui.toast('密码最小为6位数');
            return false;
        }else {

            $.ajax({
                url: website+"/UserController/changePassword",
                type: "post",
                data: {
                    "account":account,
                    "password":password,
                    "code":codenumb,
                },
                success: function (data) {
                    console.log(data);
                    mui.toast(data.msg);

                    if(data.msg=='修改成功'){
                        setTimeout(function () {
                            mui.openWindow({
                                url: "http://newst.whilte.com/index.html",
                            });
                        },1000)

                    }
                }
            })

        }
    });



    mui('.mui-input-group').on('tap', '#getcode-btn', function (e) {
        settime(this);
    });

    var countdown = 60;

    // 有ajax
    function settime(obj) {
        /*var userphone = $("#userphone").val();

        if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(userphone))) {
            mui.toast('请输入正确的手机号', {duration: 'long', type: 'div'})
            return false;
        }*/
        obtain(obj);
    }


    //发送验证码
    function obtain(obj) {
        $("#getcode-btn").removeAttr("id","getcode-btn");

        var userphone = $("#userphone").val();
        // codeNew = data.data;
        $.ajax({
            url: website+"/UserController/obtain",
            type: "post",
            data: {"phoneNumber": userphone},
            success: function (data) {
                console.log(data);
                codeNew = data.data;
                mui.toast('验证码'+data.msg);
                code1(obj);
            }
        })
    }

    function countdown1(obj) {
        countdown--;
        code1(obj);
    }

    function code1(obj) {
        var code = $(obj);
        if (countdown == 0) {
            code.attr('disabled', false);
            code.text("获取验证码");
            countdown = 60;
            $(".getcode-btn").attr("id", "getcode-btn");
            return;
        } else {
            code.text("重新发送(" + countdown + ")");
            code.attr('disabled', true);
            setTimeout(function () {
                countdown1(obj)
            }, 1000);
        }
    }



</script>

</html>
